<template>
  <div class="container">
    <normal-title
      title='收藏夹'
      :back="true"
    ></normal-title>
    <div class="main">
      <div
        class="session"
        v-for="(item, index) in collectInfo"
        :key="index"
      >
        <div class="card">
          <img
            class="thumb"
            :src="item.image"
            mode="aspectFit"
          >
          <div class="info">
            <p class="text">{{item.product_name}}</p>
            <p class="price"><span class="price-icon">￥</span>{{item.real_price}}</p>
          </div>
        </div>
        <div class="row right">
          <a
            :href="'/pages/detail/main?id='+item.product_id"
            class="btn cancel"
          >查看</a>
          <div
            @click="delCollect(item.product_id,index)"
            class="btn pay"
          >删除</div>
        </div>
      </div>
    </div>
    <bottom-btn />
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
import BottomBtn from '@/components/BottomBtn'
import { request } from '@/utils'
export default {
  components: {
    NormalTitle,
    BottomBtn
  },
  computed: {},
  data () {
    return {
      collectInfo: null,
      page: 1,
      hasMore: true
    }
  },
  methods: {
    async getCollectInfo (init) {
      if (init) {
        this.page = 1
        this.hasMore = true
      }
      var data = {
        page: this.page,
        perPage: 10
      }
      var res = await request('/v1/personal-center', 'get', data)
      if (res.data) {
        if (init) {
          this.collectInfo = res.data.items
        } else {
          this.collectInfo = this.collectInfo.concat(res.data.items)
        }
        var meta = res.data._meta
        if (meta.currentPage === meta.pageCount) {
          this.hasMore = false
        }
      }
    },
    async delCollect (id,index) {
      var res = await request('/v1/personal-center/' + id, 'put', { type: 0 })
      this.getCollectInfo(true)
      this.collectInfo.splice(index,1)
    }
  },
  mounted () {
    this.getCollectInfo(true)
  },
  async onReachBottom () {
    if (!this.hasMore) {
      return
    }
    this.page += 1
    this.getCollectInfo()
  }
}
</script>

<style>
page {
  height: 100%;
  background: #f0f0f0;
}
</style>

<style scoped lang="scss">
.container {
  font-size: 26rpx;
  color: #6d6d6d;
  .main {
    padding: 0 25rpx;
    .session {
      background: #fff;
      padding: 35rpx 25rpx;
      border-radius: 20rpx;
      margin: 25rpx 0;
      .card {
        font-size: 26rpx;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        height: 220rpx;
        border-bottom: 1rpx solid #f0f0f0;
        margin-bottom: 20rpx;
        .row {
          margin: 0;
        }
        .thumb {
          width: 200rpx;
          height: 200rpx;
          border-radius: 25rpx;
          margin-right: 30rpx;
        }
        .info {
          width: 460rpx;
          height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // border: 1rpx solid #000;
          .text {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            height: 115rpx;
            font-size: 600;
            color: #000;
          }
          .price {
            color: #b93a39;
            font-size: 36rpx;
            font-weight: 400;
            .price-icon {
              font-size: 24rpx;
              display: inline-block;
            }
          }
        }
      }
      .right {
        justify-content: flex-end;
      }
      .btn {
        font-size: 26rpx;
        height: 50rpx;
        border-radius: 30rpx;
        text-align: center;
        line-height: 46rpx;
        margin-left: 20rpx;
        width: 150rpx;
      }
      .cancel {
        border: 1rpx solid #6d6d6d;
        color: #6d6d6d;
      }
      .pay {
        border: 1rpx solid #cdb27e;
        color: #cdb27e;
      }
    }
  }
}
</style>




